<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<link rel="stylesheet" type="text/css" href="styles/simditor.css" />
		<script src="jquery.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		<script type="text/javascript" src="scripts/module.min.js"></script>
		<script type="text/javascript" src="scripts/hotkeys.min.js"></script>
		<script type="text/javascript" src="scripts/uploader.min.js"></script>
		<script type="text/javascript" src="scripts/simditor.min.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.clearfix:after,
			.clearfix:before {
				content: '';
				display: table;
			}
			
			.clearfix:after {
				clear: both;
			}
			
			.y_content {
				width: 1100px;
				margin: 20px auto 0;
				background: #F9F9F9;
				padding: 30px;
			}
			
			.y_head {
				width: 100%;
				background-color: #EFEFEF;
			}
			
			.y_header {
				width: 1100px;
				margin: auto;
				padding: 10px 0 10px;
			}
			
			.y_cont_logo {
				width: 200px;
				height: 70px;
				float: left;
				margin-left: 20px;
			}
			
			.y_cont_logo img {
				width: 200px;
				height: 70px;
			}
			
			.y_login_user {
				width: 100px;
				float: right;
				margin-right: 20px;
				position: relative;
			}
			
			.y_login_user img {
				width: 80px;
				height: 80px;
				border-radius: 50%;
				padding: 10px;
				display: block;
				margin: auto;
			}
			
			.y_user_detail {
				width: 200px;
				background: #FFF;
				border: solid 1px #CCCCCC;
				position: absolute;
				left: -40px;
				top: 80px;
				display: none;
				z-index: 1;
			}
			.y_user_detail p,
			.y_user_detail li {
				font-size: 16px;
				line-height: 46px;
				text-align: center;
			}
			.y_user_detail p a,
			.y_user_detail li a {
				text-decoration: none;
				color: #000;
			}
			
			.y_list_img {
				float: left;
			}
			
			.y_list_img img {
				width: 250px;
				height: 400px;
			}
			
			.y_list_text {
				float: left;
				margin-left: 50px;
				padding-top: 10px;
			}
			
			.y_list_text p:nth-child(1) {
				line-height: 40px;
				font-size: 24px;
			}
			
			.y_list_text p:nth-child(2) {
				line-height: 60px;
				font-size: 18px;
			}
			
			.y_list_text .y_introduce {
				font-size: 18px;
				height: 300px;
				line-height: 60px;
			}
			
			.y_list_text .y_introduce p {
				width: 600px;
				min-height: 80px;
				line-height: 55px;
				font-size: 18px;
				text-indent: 2em;
				font-size: 16px;
			}
			
			.y_intro_all {
				position: relative;
			}
			
			.y_intro_pase {
				position: relative;
			}
			
			#show,
			#hide {
				border: none;
				outline: none;
				font-size: 14px;
				color: #008CFF;
				background: #F9F9F9;
				position: absolute;
				right: 0;
				bottom: 10px;
			}
			.y_intro_pase {
				display: none;
			}
			
			.y_intro_all:hover #show,
			.y_intro_pase:hover #hide {
				color: #e26312;
			}
			
			#list_btn {
				width: 100px;
				height: 40px;
				background: #008CFF;
				border: none;
				outline: none;
				border-radius: 5px;
				font-size: 18px;
				float: right;
			}
			
			#list_btn a {
				color: #FFF;
				text-decoration: none;
			}
			
			#y_list_list li {
				width: 100%;
				height: 60px;
				line-height: 60px;
				border-bottom: solid 1px #ccc;
				padding-left: 30px;
				box-sizing: border-box;
			}
			
			.y_list_tit h3 {
				font-size: 30px;
				line-height: 120px;
			}
			
			.y_list_input textarea {
				width: 800px;
				height: 150px;
				font-size: 16px;
				display: block;
				padding: 20px;
				box-sizing: border-box;
			}
			
			.y_list_input button {
				width: 90px;
				height: 40px;
				line-height: 40px;
				color: #FFF;
				background: #008CFF;
				border: none;
				outline: none;
				float: right;
				margin-right: 250px;
				margin-top: 30px;
			}
			
			.y_list_catals {
				padding: 20px 30px;
				;
			}
			
			#y_list_commend {
				margin-top: 40px;
				padding: 20px 0 0 20px;
			}
			
			#y_list_commend li img {
				width: 70px;
				height: 70px;
				border-radius: 50%;
				float: left;
			}
			
			#y_list_commend li div {
				float: left;
			}
			
			#y_list_commend li div p:nth-child(1) {
				font-size: 18px;
				line-height: 60px;
				margin-left: 30px;
				margin-bottom: 20px;
			}
			
			#y_list_commend li div p:nth-child(2) {
				font-size: 14px;
				margin-left: 20px;
			}
			
			#y_list_commend li {
				border-bottom: solid 1px #ccc;
				padding-bottom: 10px;
				padding-top: 10px;
				
			}
			
			.y_list_button {
				margin-right: 50px;
				float: right;
			}
			
			.y_list_button button {
				margin-top: 10px;
				background: #F9F9F9;
				border: none;
				outline: none;
				margin-left: 30px;
				height:30px;
				line-height: 30px;
			}
			
			.y_list_button button a {
				color: #000;
				text-decoration: none;
				font-size: 16px;
			}
			
			.y_list_button #y_add_btn:hover {
				color: #008CFF;
			}
			
			.y_list_button #y_delete_btn:hover {
				color: #CE2F2B;
			}
			
			.y_list_section {
				float: left;
				height: 60px;
				line-height: 60px;
				margin-bottom: 0;
			}
			
			.y_login_bottom {
				width: 100%;
				padding-bottom: 30px;
				margin-top: 100px;
			}
			
			.y_login_bottom p {
				font-size: 16px;
				line-height: 50px;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="y_head">
				<div class="y_header clearfix">
					<div class="y_cont_logo">
						<img src="images/2.png" />
					</div>
					<div class="y_login_user">
						<img src="" />
						<ul class="y_user_detail">
							<p>
								<a href="">立即登录</a>
							</p>
							<li>
								<a href="">用户名</a>
							</li>
							<li>
								<a href="">我的书架</a>
							</li>
							<li>
								<a href="">我的收藏</a>
							</li>
							<li>
								<a href="">个人中心</a>
							</li>
							<li>
								<a href="">退出登录</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="y_content">
				<div class="y_list_control clearfix">
					<div class="y_list_img">
						<img src="" />
					</div>
					<div class="y_list_text">
						<p>小说名</p>
						<p>作者:</p>
						<div class="y_introduce"> 简介:
							<div class="y_intro_all">
								<p></p>
								<button id="show">展开</button>
							</div>
							<div class="y_intro_pase">
								<p></p>
								<button id="hide">收起</button>
							</div>
						</div>
					</div>
					<button id="list_btn"><a href="">章节续更</a></button>
				</div>
				<!--目录-->
				<div class="y_list_catal">
					<div class="y_list_tit">
						<h3>章节目录</h3>
					</div>
					<ul id="y_list_list">

					</ul>
				</div>
				<!--评论-->
				<div class="y_list_catals">
					<div class="y_list_tit">
						<h3>评论区</h3>
					</div>
					<div class="y_list_input clearfix">
						<textarea name="" rows="" cols="" id="y_commend_text"></textarea>
						<button id="y_commend_btn">发布</button>
					</div>
					<ul id="y_list_commend">
						<!--<li class="clearfix">
							<img src="../../img/1.jpg" alt="" />
							<div>
								<p>用户名</p>
								<p>只看到你在把战斗力</p>
							</div>
						</li>-->

					</ul>
				</div>
			</div>
			<div class="y_login_bottom">
				<p>清朗网文　|　关于逐浪　|　作者投稿　|　用户指南　|　服务条款　|　版权声明　|　网站地图　|　招聘信息　|　联系我们</p>
				<p>Copyright © 2019 zhulang.com, All Rights Reserved. 南京大众书网图书文化有限公司版权所有 未经书面许可不得复制转载。</p>
				<p>增值电信业务经营许可证苏B2-20130019 苏ICP备12028084号 苏网文[2016]5224-123号 新出网证（苏）字0027号　</p>
			</div>
			<div class="modal fade" id="myNovel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title">Modal title</h4>
						</div>
						<div class="modal-body">
							<div class="form-group">
								<label for="user">小说章节</label>
								<input type="text" class="form-control" id="novel_list">
							</div>
							<div>
								<label for="text">内容</label>
								<textarea id="editor" placeholder="Balabala" autofocus></textarea>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-primary" id="novel_list_btn">录入</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="jquery.js"></script>
	<script type="text/javascript">
		//判断有没有登录
		if(!localStorage.user) {
			$('.y_user_detail p').css({
				display: 'block'
			})
			$('.y_user_detail li').css({
				display: 'none'
			})
		} else {
			$('.y_user_detail p').css({
				display: 'none'
			})
			$('.y_user_detail li').css({
				display: 'block'
			})
			$('.y_login_user img').attr('src', localStorage.img)
			$('.y_login_user li').eq(0).html(localStorage.name)
		}
		//富文本
		var editor = new Simditor({
			textarea: $('#editor')
		});
		//登陆注册
		$('.y_login_user').on('mouseover', function() {
			$('.y_user_detail').show()
		})
		$('.y_login_user').on('mouseout', function() {
			$('.y_user_detail').hide()
		})
		//简介查看更多
		$('#show').on('click', function() {
			$('.y_intro_all').hide()
			$('.y_intro_pase').show()
		})
		$('#hide').on('click', function() {
			$('.y_intro_all').show()
			$('.y_intro_pase').hide()
		})
		$('.y_login_user img').attr('src', localStorage.img)
		$('.y_login_user li').eq(0).html(localStorage.name)
		var href = 'http://localhost:8000'
		var str = location.href.split('?')[1].split('=')[1]
		$.ajax({
			type: "post",
			url: href + "/users/mybook",
			data: {
				uid: str
			},
			success(data) {
				console.log(data)
				$('.y_list_img img').attr('src', data[0].novelimg)
				$('.y_list_text p').eq(0).html('《' + data[0].novelname + '》')
				$('.y_list_text').attr('data-suid',data[0].uid)
				$('.y_list_text p').eq(1).html('作者：' + data[0].author)
				$('.y_intro_pase p').html(data[0].novelsyn)
				var str = data[0].novelsyn.length / 2
				var arr = data[0].novelsyn.slice(0, str)
				$('.y_intro_all p').html(arr + '.....')
				$.ajax({
					type: "post",
					url: href + "/users/zj",
					data: {
						searchuid: data[0].uid
					},
					success(data) {
						console.log(data)
						if(data == '你还没有创建章节') {
							alert('你还没有创建章节请返回个人中心创建章节')
						} else {
							data.forEach(function(o, i) {
								var oLi = $('<li class="clearfix">').attr('data-listuid',data[i].uid)
								var oA=$('<a>')
								oA.append($('<p class="y_list_section">' + data[i].booklist + '</p>')).append($('<div class="y_list_button">').html('<button id="y_add_btn" data-toggle="modal" data-target="#myNovel">修改</button><button id="y_delete_btn">删除</button>'))
								oLi.append(oA)
								$('#y_list_list').append(oLi)
							})
						}
					}
				});
			}
		});
		//点修改章节内容
		var names=''
		var luid=''
		$('#y_list_list').on('click','#y_add_btn',function(e){
			var evt=e||event
			evt.preventDefault()
			names=$(this).parent().prev().html()
			luid=$(this).parents('li').attr('data-listuid')
			console.log(luid)
		})
		
		//章节阅读
		$('#y_list_list').on('click', 'a', function() {
			$(this).attr('href', href + '/read.html?uid=' + arr1 + '&booklist=' + $(this).children('p').html())
		})
		$('#novel_list_btn').on('click',function(){
			if(novel_list.value == '' || $('.simditor-body').html() == '') {
				alert('内容不能为空')
			} else if(novel_list.value.length >= 15) {
				alert('章节名字过长不能超过15个')
			} else {
				$.ajax({
					type: "post",
					url: href + "/users/xiulist",
					data: {
						newname: novel_list.value,
						searchuid: str,
						text: $('.simditor-body').html(),
						listuid:luid
					},
					success(data) {
						alert(data)
					}
				});
			}
		})
		//点击删除章节
		$('#y_list_list').on('click','#y_delete_btn',function(e){
			var evt=e||event
			evt.preventDefault()
//			names=$(this).parent().prev().html()
			luid=$(this).parents('li').attr('data-listuid')
			var _this=$(this)
			$.ajax({
				type:"post",
				url:href+"/users/remove",
				data:{
					uid:luid
				},
				success(data){
					alert(data)
					_this.parents('li').remove()
				}
			});
		})
		//评论
		var str = location.href
		var arr = str.split('?')[1]
		var arr1 = arr.split('=')[1]
		console.log(arr1)
		$('#y_commend_btn').on('click', function() {
			if(y_commend_text.value == '') {
				alert('评论内容不能为空')
			} else {
				$.ajax({
					type: "post",
					url: href + "/users/commend",
					data: {
						loginuid: localStorage.uid,
						loginimg: localStorage.img,
						name: localStorage.name,
						searchuid:arr1,
						text: y_commend_text.value
					},
					success(data) {
						alert(data)
						$.ajax({
							type: "post",
							url: href + "/users/append",
							data: {
								text: y_commend_text.value
							},
							success(data) { //返回评论内容
								console.log(data)
								var add = data[data.length - 1]
								console.log(add)
								var oLi = $('<li class="clearfix">').append($('<img>').attr('src', add.loginimg))
									.append($('<div class="y_list_user">').append($('<p>').html(add.loginuser))
										.append($('<p>').html(add.text)))
								$('#y_list_commend').prepend(oLi)

								y_commend_text.value = ''
							}
						});

					}
				});
			}
		})
		$.ajax({
			type: "post",
			url: href + "/users/commt",
			data: {
				loginuid: localStorage.uid,
				searchuid: arr1
			},
			success(data) {
				console.log(data)
				for(var i = 0; i < data.length; i++) {
					var oLi = $('<li class="clearfix">').append($('<img>').attr('src', data[i].loginimg))
						.append($('<div class="y_list_user">').append($('<p>').html(data[i].loginuser))
							.append($('<p>').html(data[i].text)))
					$('#y_list_commend').prepend(oLi)
				}
			}
		});
		//退出登录
		$('.y_login_user li').eq(4).on('click', function() {
			$('.y_login_user li').eq(0).html('用户名:')
			$('.y_login_user img').attr('src', 'images/1.png')
			localStorage.clear('user')
			localStorage.clear('uid')
			localStorage.clear('img')
			localStorage.clear('name')
			$(this).children('a').attr('href',href)
		})
		//个人中心
		$('.y_login_user li').eq(3).on('click', function() {
			$(this).children('a').attr('href',href+'/detials.html')
		})
		//我的书架
		$('.y_login_user li').eq(1).on('click', function() {
			$(this).children().attr('href', href + '/books.html')
		})
		//个人收藏
		$('.y_login_user li').eq(2).on('click', function() {
			$(this).children().attr('href', href + '/collect.html')
		}) 
	</script>

</html>